import React, { PureComponent } from 'react'
import { View, Text, FlatList, Image, StyleSheet, Dimensions, Platform } from 'react-native'
import { connect } from 'react-redux'
import { fetchListService } from '../../actions'
import JPushModule from 'jpush-react-native'


const RenderItem = props => {
  const { user, content, likedCount } = props.item
  const { avatarUrl, nickname } = user
  return (
    <View style={styles.listContainer}>
      <View style={styles.user}>
        <Image source={{uri: avatarUrl}} style={{width: 48, height: 48, borderRadius: 2}}></Image>
        <Text style={styles.nickname}>{nickname}</Text>
      </View>
      <View style={styles.contentContainer}>
        <Text style={styles.content}>{content}</Text>
        <View style={styles.likeContainer}>
          <Image style={styles.likedIcon} source={require('../../assets/icons/like.png')}></Image>
          <Text style={styles.likedCount}>{likedCount}</Text>
        </View>
      </View>
    </View>
  )
}

const ListEmpty = () => {
  return (
    <View>
      <Text>暂无数据</Text>
    </View>
  )
}

class Home extends PureComponent {

  constructor () {
    super()
    this.state = {
      page: 1
    }
  }

  componentDidMount () {
    const { dispatch } = this.props
    const { page } = this.state
    dispatch(fetchListService(page))
    if (Platform.OS === 'android') {
      JPushModule.initPush()
      JPushModule.notifyJSDidLoad(resultCode => {
        console.log(resultCode)
      })
    }
    JPushModule.addReceiveNotificationListener((message) => {
      console.log('收到通知')
      console.log("receive notification: " + message);
    })
    JPushModule.addReceiveCustomMsgListener(message => {
      console.log(message)
    })

    JPushModule.addReceiveOpenNotificationListener(message => {
      const { history } = this.props
      history.push(`/?id=${message.extras.id}`)
    })

    JPushModule.getRegistrationID(registrationId => {
      console.log('Device register succeed, registrationId ' + registrationId)
    })
  }

  componentWillUnmount() {
    JPushModule.removeReceiveCustomMsgListener();
    JPushModule.removeReceiveNotificationListener();
  }

  render () {
    const { list } = this.props
    console.log(this.props)
    const flatListProps = {
      data: list,
      renderItem: (item, index, separators) => <RenderItem {...item} />,
      ListEmptyComponent: () => <ListEmpty />,
      keyExtractor: (item, index) => item.time + ''
    }
    return (
      <View style={styles.homeContainer}>
        <FlatList {...flatListProps} />
      </View>
    )
  }
}

const mapStateToProps = state => {
  const { list } = state
  return {
    list
  }
}

const { width, height } = Dimensions.get('window')
const textFontSize = 10

const styles = StyleSheet.create({
  homeContainer: {
    width,
    height,
    paddingTop: 15,
    paddingBottom: 15
  },
  listContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    paddingVertical: 10,
    paddingHorizontal: 10,
    borderBottomColor: '#ccc',
    borderStyle: 'solid',
    borderBottomWidth: 0.5
  },
  user: {
    width: 48,
    marginRight: 5
  },
  nickname: {
    fontSize: 8,
    marginTop: 3
  },
  contentContainer: {
    flex: 1
  },
  content: {
    fontSize: textFontSize,
    textAlign: 'justify'
  },
  likeContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    marginTop: 5
  },
  likedIcon: {
    width: 12,
    height: 12,
    marginRight: 5,
    marginTop: 1
  },
  likedCount: {
    fontSize: textFontSize
  }
})

export default connect(mapStateToProps)(Home)
